<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">绑定提现账户</block>
		</cu-custom>
		
		<view class="cu-form-group group-grey border-bottom">
			<view class="title">真实姓名</view>
			<input placeholder="输入姓名"></input>
		</view>
		<view class=" title-radio">
			<view>选择提现账户</view>
		</view>

		<radio-group class="block" @change="RadioChange">
			<view class="cu-form-group">
				<radio class='radio pink' :class="radio=='zfb'?'checked':''" :checked="radio=='zfb'?true:false" value="zfb"></radio>
				
				<view class="flex justify-between align-center layout">
					<view class="title">支付宝账号</view>
					<input placeholder="请输入账户" :value="zfb" @input="changezfb" :disabled="radio!=='zfb'"/>
				</view>
			</view>
			<view class="cu-form-group border-bottom">
				<radio class='radio pink' :class="radio=='wx'?'checked':''" :checked="radio=='wx'?true:false" value="wx"></radio>
				<view class="flex justify-between align-center layout">
					<view class="title">微信账号</view>
					<input placeholder="请输入账户"  :value="wx" @input="changevx" :disabled="radio!=='wx'"/>
				</view>
			</view>
		</radio-group>
		
		<view class="flex justify-center">
			<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round btn" @click="submit">确认</button>
		</view>
		
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	
	export default {
		data() {
			return {
				radio: 'zfb',
				wx: "",
				zfb:''
			};
		},
		computed: {
			...mapState({
				user: ({ user }) => user.userInfo,
			}),
		},
		methods:{
			RadioChange(e) {
				this.radio = e.detail.value
				if(this.radio === 'zfb') {
					this.wx = ""
				} else {
					this.zfb = ""
				}
			},
			submit() {
				const id = this.user.id;
				const u = this.user.phone;
				
			},
			changezfb(e) {
				this.zfb = e.detail.value
			},
			changevx(e) {
				this.wx = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>

	switch.pink[checked] .wx-switch-input,
	checkbox.pink[checked] .wx-checkbox-input,
	radio.pink[checked] .wx-radio-input,
	switch.pink.checked .uni-switch-input,
	checkbox.pink.checked .uni-checkbox-input,
	radio.pink.checked .uni-radio-input {
		background-color: #E428FD !important;
		border-color: #E428FD !important;
		color: #ffffff !important;
	}
	
	.border-bottom{
		border-bottom: 1px solid #E6E6E6;
	}
	.cu-form-group+.cu-form-group {
		border-top: 1px solid #E6E6E6;
	}
	.title-radio{
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 28px;
		color: #333333;
		background-color: #FFFFFF;
		padding-top: 15px;
		padding-left: 13px;
		
	}
	.layout {
		width: 100%;
		margin-left: 20px;
	}


	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.color-100{
		color: #FFFFFF;
	}
	.btn{
		width: 240px;
		margin-top: 80px;
	}
</style>
